import React from "react";
import { Button, Form, Input } from "antd";

const TableForm = React.memo((props: any) => {
  // 创建一个稳定的函数引用
  const stableOnSubmit = React.useMemo(() => {
    return (values: any) => {
      if (typeof props.onSubmit === "function") {
        props.onSubmit(values);
      } else {
        console.error("onSubmit is not a function:", props.onSubmit);
      }
    };
  }, [props.onSubmit]);

  const handleSubmit = (values: any) => {
    stableOnSubmit(values);
  };

  return (
    <Form
      name="tableForm"
      onFinish={handleSubmit}
      layout="vertical"
      style={{ maxWidth: 600 }}
    >
      <Form.Item
        label="Name"
        name="name"
        rules={[{ required: true, message: "Please input your name!" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Age"
        name="age"
        rules={[{ required: true, message: "Please input your age!" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Address"
        name="address"
        rules={[{ required: true, message: "Please input your address!" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Tags"
        name="tags"
        rules={[{ required: true, message: "Please input your tags!" }]}
      >
        <Input placeholder="输入标签，用逗号分隔" />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
});

TableForm.displayName = "TableForm";

export default TableForm;
